<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
    <title>
        视图 &middot; Mower-前端开发框架
    </title>
    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="mower/admin/css/mower.min.css" rel="stylesheet">
    <!-- Documentation extras -->
    <link href="assets/css/docs.css" rel="stylesheet">
    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Favicons -->
    <link rel="icon" href="../favicon.ico">
</head>

<body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../index.html" class="navbar-brand">Mower</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="getting-started.html">开始</a>
                    </li>
                    <li>
                        <a href="css.html">基础</a>
                    </li>
                    <li>
                        <a href="controls.html">控件</a>
                    </li>
                    <li>
                        <a href="components.html">组件</a>
                    </li>
                    <li>
                        <a href="javascript.html">Javascript插件</a>
                    </li>
                    <li class="active">
                        <a href="view.html">视图</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                     <li><a href="examples/admin/">示例</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
        <div class="container">
            <h1>视图</h1>
            <p>主要介绍数据表格、菜单、前后端布局界面等等。</p>
        </div>
    </div>
    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-9" role="main">
                <div class="bs-docs-section">
                    <h2 id="datatables" class="page-header">数据表格<small>datatables.mower.js</small></h2>
                    <div class="alert alert-danger">
                        <h5>插件依赖</h5>
                        <p>
                            数据表格依赖
                            <a href="http://www.datatables.net/">datatables插件</a> 。Mower默认打包已经包含，独立使用此插件需要先加载datatables插件。
                        </p>
                    </div>
                    <p>下面实例中罗列常用例子，更多例子可以参考<a href="http://dt.thxopen.com/example/" target="_blank">datatables中文网</a>或者<a href="http://datatables.net/examples/index" target="_blank">datatables英文网</a></p>
                    <h3 class="item-header" id="datatables-examples">实例</h3>
                    <h4 class="subitem-header" id="datatables-examples-html">简单应用</h4>
                    <p>
                        Dom数据源是Datatables最基本的用法，下面演示了html静态数据使用Datatables实现过滤，排序，分页
                    </p>
                    <div class="bs-example">
                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" rel="datatables">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>办公地点</th>
                                    <th>年龄</th>
                                    <th>入职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                    <tr>
                                        <td>小明</td>
                                        <td>系统架构师</td>
                                        <td>中国</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                    </tr>
                                    <tr>
                                        <td>张三</td>
                                        <td>系统架构师</td>
                                        <td>中国</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                    </tr>
                                    <tr>
                                        <td>王五</td>
                                        <td>系统架构师</td>
                                        <td>中国</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                    </tr>
                                    <tr>
                                        <td>张三</td>
                                        <td>系统架构师</td>
                                        <td>中国</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                    </tr>
                                    <tr>
                                        <td>王五</td>
                                        <td>系统架构师</td>
                                        <td>中国</td>
                                        <td>61</td>
                                        <td>2011/04/25</td>
                                        <tr>
                                            <td>小明</td>
                                            <td>系统架构师</td>
                                            <td>中国</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                        </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;!-- HTML 代码 --&gt;
&lt;table id="example" class="table table-striped table-bordered table-hover"  cellspacing="0" width="100%" rel="datatables"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;#&lt;/th&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      ...
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    ...
  &lt;/tbody&gt;
&lt;/table&gt;
                  </pre>
                    </div>
                    <h4 class="subitem-header" id="datatables-examples-sort">启用排序功能</h4>
                    <p>允许或禁止对各个数据列使用排序。 默认情况下，点击每列的表头单元格,可以根据该列对整个表格进行排序。这个选项可以停用这个排序功能。</p>
                    <p>注意：禁止或者启用单个列的排序功能，可以通过该列的<a href="#"><code class="option" title="DataTables initialisation option">columns.orderable<span>DT</span></code></a>选项来实现。 现在的这个ordering选项是一个全局的配置- 如果禁止，整个DataTables都会停用排序功能。默认值：<code>true</code></p>
                    <div class="bs-example">
                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" data-ordering="true" rel="datatables">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>办公地点</th>
                                    <th>年龄</th>
                                    <th>入职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#example').dataTable( {
  "ordering": false
} );
                  </pre>
                    </div>
                    <h4 class="subitem-header" id="datatables-examples-paging">启用分页功能</h4>
                    <p>DataTables可以将大量的记录分割为一个个独立的页。在一个较小的页面空间上展示大量的数据记录的时候，这是个非常有效的方法。 这个提供了页面导航控件用来请求显示不同的数据。 这个功能是默认启用的<code>true</code>，如果你想禁止它就将它设置为<code>false</code>.</p>
                    <div class="bs-example">
                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" data-paging="true" rel="datatables">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>办公地点</th>
                                    <th>年龄</th>
                                    <th>入职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#example').dataTable( {
    "paging": false
} );
                  </pre>
                    </div>
                    <h4 class="subitem-header" id="datatables-examples-selected">高亮选中行</h4>
                    <p>允许在数据表格添加行选中功能并高亮显示。这个功能是默认启用的<code>true</code>，如果你想禁止它就将它设置为<code>false</code>.</p>
                    <div class="bs-example">
                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"  rel="datatables">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>办公地点</th>
                                    <th>年龄</th>
                                    <th>入职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>系统架构师</td>
                                    <td>中国</td>
                                    <td>61</td>
                                    <td>2011/04/25</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#example').dataTable( {
    "select": true
} );
                  </pre>
                    </div>
                    <h4 class="subitem-header" id="datatables-examples-all">综合示例</h4>
                    <p>
                        Datatables有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。 在服务器模式下，所有的分页，搜索，排序等操作，Datatables都会交给服务器去处理。所以每次绘制Datatables，都会请求一次服务器获取需要的数据。
                    </p>
                    <p>
                        通过配置<code class="option" title="DataTables initialisation option">serverSide<span>DT</span></code> 这个属性来打开Datatables的服务器模式，下面的例子展示了Datatables打开服务器模式。
                    </p>
                    <div class="bs-example">
                        <table id="list-application" class="table table-striped table-bordered table-hover" width="100%" data-serverSide="true" data-paging="true" data-ordering="false" data-ajax="${base}/admin/macula-base/application/apps">
                            <thead>
                                <tr>
                                    <th data-name="appGroup">应用分组</th>
                                    <th data-name="appId">应用编号</th>
                                    <th data-name="name">应用名称</th>
                                    <th data-name="supervisor">负责人</th>
                                    <th data-name="contact">联系方式</th>
                                    <th data-name="singleSignOn">支持单点登陆</th>
                                    <th data-name="singleSignOut">支持单点登出</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;table id="list-application" class="table table-striped table-bordered table-hover" width="100%"
 data-serverSide="true" 
 data-paging="true" 
 data-ordering="false" 
 data-ajax="${base}/admin/macula-base/application/apps"
 rel="datatables"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th data-name="appGroup"&gt;应用分组&lt;/th&gt;
            &lt;th data-name="appId"&gt;应用编号&lt;/th&gt;
            &lt;th data-name="name"&gt;应用名称&lt;/th&gt;
            &lt;th data-name="supervisor"&gt;负责人&lt;/th&gt;
            &lt;th data-name="contact"&gt;联系方式&lt;/th&gt;
            &lt;th data-name="singleSignOn"&gt;支持单点登陆&lt;/th&gt;
            &lt;th data-name="singleSignOut"&gt;支持单点登出&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
&lt;/table&gt;
                  </pre>
                    </div>
                    <h3 class="item-header" id="datatables-usage">如何使用</h3>
                    <h4 class="subitem-header" id="datatables-usage-rel">通过 <code>rel="datatables"</code>
                  激活数据表格</h4>
                    <div class="alert alert-info">
                        <h5>Html data-* 属性</h5>
                        <p>
                            Datatables是一个高度灵活的表格工具，可以将任何HTML表格添加高级的交互功能。其中有非常多的参数可以配置。但有些参数使用Html data-* 属性配置难于去书写表达，建议高级选项使用Jadascript去激活数据表格。
                        </p>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;table id="example"  cellspacing="0" width="100%" rel="datatables"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;#&lt;/th&gt;
      &lt;th&gt;时间&lt;/th&gt;
      ...
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    ...
  &lt;/tbody&gt;
&lt;/table&gt;
                    </pre>
                    </div>
                    <h4 class="subitem-header" id="datatables-usage-js">通过JavaScript激活数据表格</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
$(<span class="string">'#selector'</span>).datatables(options)
                    </pre>
                    </div>
                    <h4 class="subitem-header" id="#datatables-option">参数</h4>
                    <p>
                        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                        <code>data-</code> 之后，例如
                        <code>data-paging=""</code> 。
                    </p>
                    <div class="alert alert-info">
                        <h5>配置参数</h5>
                        <p>
                            Datatables是一个高度灵活的表格工具，可以将任何HTML表格添加高级的交互功能。其中有非常多的参数可以配置。配置参数请参考可以参考<a href="http://dt.thxopen.com/reference/#options" target="_blank">datatables中文网</a>或者<a href="http://datatables.net/reference/option/" target="_blank">datatables英文网</a></p>
                        </p>
                    </div>
                    <h4 class="subitem-header" id="datatables-function">方法</h4>
                    <div class="alert alert-info">
                        <h5>API方法</h5>
                        <p>
                            Datatables有一个强大的api，用来处理表格上的数据，你可以添加数据到已经存在的表格，或者对已经存在的数据进行操作。API旨在能够很好地操作表格中的数据。API请参考可以参考<a href="http://dt.thxopen.com/reference/api/" target="_blank">datatables中文网</a>或者<a href="http://datatables.net/reference/api/" target="_blank">datatables英文网</a></p>
                        </p>
                    </div>
                    <h4 class="subitem-header" id="datatables-event">事件</h4>
                    <div class="alert alert-info">
                        <h5>API方法</h5>
                        <p>
                            Datatables对自己所触发的事件都有监听，我们可以监听这些动作做相应的处理，比如表格重绘的时候，我需要做一些操作
                        </p>
                        <p>
                            Datatables的事件监听使用
                            <a href="http://datatables.net/reference/api/on()" target="_blank">
                                <code>on()<span>DT</span></code>
                            </a> 方法或者 <a href="http://api.jquery.com/on/" target="_blank">
                           jQuery.on()
                       </a> ,事件的命名都用dt结尾， 保证和其他的命名不冲突，下面的例子显示了如何监听
                            <a href="http://datatables.net/reference/event/draw" target="_blank">
                                <code style="color: #2a839e;background-color: #f5fafb;border: 1px solid #a8ddec;">draw</code>
                            </a>事件
                        </p>
                        <pre class="prettyprint">
$('#myTable').on('draw.dt',
    function() {
        alert('Table redrawn');
    });
                    </pre>
                        <p>
                            事件请参考可以参考<a href="http://dt.thxopen.com/reference/event/" target="_blank">datatables中文网</a>或者<a href="http://datatables.net/reference/event/" target="_blank">datatables英文网</a></p>
                        </p>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="bootpage" class="page-header">自定义数据表格</h2>
                    <p>Mower为了加强数据表格定制化，引入第三方插件<a target="_blank" href="http://botmonster.com/jquery-bootpag/" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i>bootpag ajax分页</a>和<a target="_blank" href="https://github.com/BorisMoore/jquery-tmpl" title="" data-original-title="这是一个第三方组件，点击访问网站"><i class="icon-heart"></i>jquery tmpl html模板</a>。</p>

                    <div class="alert alert-danger">
                        <h5>初始化</h5>
                        <p>
                            bootpag插件默认初始化数据不加载,需要手动加载数据。
                        </p>
                    </div>

                    <h3 class="item-header" id="bootpage-examples">实例</h3>
                    <div class="bs-example">
                        <table id="bootpag-example" class="table table-striped table-bordered table-hover" >
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>职位</th>
                                    <th>办公地点</th>
                                    <th>薪资</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Thor Walton</td>
                                    <td>Developer</td>
                                    <td>New York</td>
                                    <td>$98,540</td>
                                </tr>
                                <tr>
                                    <td>Finn Camacho</td>
                                    <td>Support Engineer</td>
                                    <td>San Francisco</td>
                                    <td>$87,500</td>
                                </tr>
                                <tr>
                                    <td>Serge Baldwin</td>
                                    <td>Data Coordinator</td>
                                    <td>Singapore</td>
                                    <td>$138,575</td>
                                </tr>
                                <tr>
                                    <td>Zenaida Frank</td>
                                    <td>Software Engineer</td>
                                    <td>New York</td>
                                    <td>$125,250</td>
                                </tr>
                                <tr>
                                    <td>Zorita Serrano</td>
                                    <td>Software Engineer</td>
                                    <td>San Francisco</td>
                                    <td>$115,000</td>
                                </tr>
                            </tbody>
                        </table>
                        <div id="page-selection"></div>
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
// init bootpag
$('#page-selection').bootpag({
    total: 2
}).on("page", function(event, /* page number here */ num){
    // some ajax content loading...
    var that = this;
    var markup = '&lt;tr&gt;&lt;td&gt;${name}&lt;/td&gt;&lt;td&gt;${position}&lt;/td&gt;&lt;td&gt;${office}&lt;/td&gt;&lt;td&gt;${salary}&lt;/td&gt;&lt;/tr&gt;';

      // Compile the markup as a named template
      $.template( "rowTemplate", markup);
      $.ajax({
        dataType: "json",
        url: '../../assets/ajax/data/objects_tmpl.txt',
      })
      .done(function(result){
        // Render the template with the "employee" data and insert
        // the rendered HTML under the 'bootpag-example tbody' element
        $('#bootpag-example tbody').empty();
        $.tmpl( "rowTemplate", result.data )
               .appendTo("#bootpag-example tbody");
        // ... after content load -&gt; change total to 10
        $(that).bootpag({total: result.data.length/3, maxVisible: 10});
      });
});
                          </pre>
                    </div>
                    <h3 class="item-header" id="bootpage-usage">如何使用</h3>
                    <h4 class="subitem-header" id="bootpage-usage-js">通过JavaScript激活表格</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
$('.demo1').bootpag({
    total: 5
}).on("page", function(event, num){
    //some ajax content loading...

    /* Render the template with the movies data and insert
       the rendered HTML under the "movieList" element */
    $.tmpl( "template", ajaxdata ).appendTo( "#table body" ); // 
 
    // ... after content load -> change total to 10
    $(this).bootpag({total: 10, maxVisible: 10});
 
});
                            </pre>
                    </div>
                    <h4 class="subitem-header" id="bootpage-options">参数</h4>
                    <div class="alert alert-info">
                        <h5>配置参数</h5>
                        <p>
                            <a target="_blank" href="http://botmonster.com/jquery-bootpag/" title="" data-original-title="这是一个第三方组件，点击访问网站">bootpag ajax分页</a>插件支持更多参数去配置及显示分页条，下面仅仅罗列常用参数。
                        </p>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 100px;">名称</th>
                                    <th style="width: 100px;">类型</th>
                                    <th style="width: 50px;">默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>total</td>
                                    <td>number</td>
                                    <td>空</td>
                                    <td>总页数</td>
                                </tr>
                                <tr>
                                    <td>maxVisible</td>
                                    <td>number</td>
                                    <td>空</td>
                                    <td>分页条上面最大显示页项个数</td>
                                </tr>
                                <tr>
                                    <td>page</td>
                                    <td>number</td>
                                    <td>1</td>
                                    <td>
                                        开始显示第几页
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                </div>
                <div class="bs-docs-section">
                    <h2 id="vmmenu" class="page-header">类电商式下拉菜单<small>vertical.menu.mower.js</small>&nbsp;<small></h2>
                    <h3 class="item-header" id="vmmenu-examples">实例</h3>
                    <div class="bs-example">
                        <!-- BEGIN MAIN MENU -->
                        <div class="navbar navbar-default-red ">
                            <div class="navbar-header">
                                <!--<a href="#" class="navbar-brand">Search</a>-->
                                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <div class="navbar-collapse collapse" id="navbar-main">
                                <ul class="nav navbar-nav">
                                    <li class="dropdown mu-menu">
                                        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" id="allcate-header">全部系统功能<i class="fa fa-list pull-right"></i></a>
                                        <ul id="main-menu" data-url="assets/ajax/data/admin_menu.txt" rel="vmMenu" class="dropdown-menu" aria-labelledby="allcate-header">
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="https://uim.infinitus.com.cn/login?service=https://gbss.infinitus.com.cn/j_spring_cas_security_check&forward=/front&form=https://gbss.infinitus.com.cn/front/login&appId=gbss-portal@ALL_APP&nextstep=https://gbss.infinitus.com.cn/front/gbss-portal-web/dealer/nextstep/1">无限极e帆网</a>
                                    </li>
                                    <li>
                                        <a href="http://www.infinitus.com.cn/" target="_blank">中华养生馆</a>
                                    </li>
                                    <li>
                                        <a href="http://iu.infinitus.com.cn/index.html" target="_blank">无限极教育网</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- END MAIN MENU -->
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;!-- BEGIN MAIN MENU --&gt;
&lt;div class="navbar navbar-default-red "&gt;
 &lt;div class="navbar-header"&gt;
     &lt;!--&lt;a href="#" class="navbar-brand"&gt;Search&lt;/a&gt;--&gt;
     &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
     &lt;/button&gt;
 &lt;/div&gt;
 &lt;div class="navbar-collapse collapse" id="navbar-main"&gt;
     &lt;ul class="nav navbar-nav"&gt;
         &lt;li class="dropdown mu-menu"&gt;
             &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" id="allcate-header"&gt;全部系统功能&lt;i class="fa fa-list pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
             &lt;ul id="main-menu" data-url="assets/ajax/data/admin_menu.txt" rel="vmMenu" class="dropdown-menu" aria-labelledby="allcate-header"&gt;

             &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;a href="index.html"&gt;首页&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;a target="_blank" href="https://uim.infinitus.com.cn/login?service=https://gbss.infinitus.com.cn/j_spring_cas_security_check&forward=/front&form=https://gbss.infinitus.com.cn/front/login&appId=gbss-portal@ALL_APP&nextstep=https://gbss.infinitus.com.cn/front/gbss-portal-web/dealer/nextstep/1"&gt;无限极e帆网&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;a href="http://www.infinitus.com.cn/" target="_blank"&gt;中华养生馆&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
             &lt;a href="http://iu.infinitus.com.cn/index.html" target="_blank"&gt;无限极教育网&lt;/a&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;!-- END MAIN MENU --&gt;
                   </pre>
                    </div>
                    <h3 class="item-header" id="vmmenu-usage">如何使用</h3>
                    <h4 class="subitem-header" id="vmmenu-usage-rel">通过 <code>rel="vmMenu"</code>
                   激活菜单</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;!-- BEGIN MAIN MENU --&gt;
&lt;div class="navbar navbar-default-red "&gt;
&lt;div class="navbar-header"&gt;
 &lt;!--&lt;a href="#" class="navbar-brand"&gt;Search&lt;/a&gt;--&gt;
 &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
     &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;/button&gt;
&lt;/div&gt;
&lt;div class="navbar-collapse collapse" id="navbar-main"&gt;
 &lt;ul class="nav navbar-nav"&gt;
     &lt;li class="dropdown mu-menu"&gt;
         &lt;a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#" id="allcate-header"&gt;全部系统功能&lt;i class="fa fa-list pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
         &lt;ul id="main-menu" data-url="http://localhost:9000/assets/ajax/data/menu.txt" rel="vmMenu"class="dropdown-menu" aria-labelledby="allcate-header"&gt;

         &lt;/ul&gt;
     &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- END MAIN MENU --&gt;
                     </pre>
                    </div>
                    <h4 class="subitem-header" id="vmmenu-usage-js">通过JavaScript激活菜单</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
    $(<span class="string">'#selector'</span>).vmMenu(options)
                     </pre>
                    </div>
                    <h4 class="subitem-header" id="vmmenu-options">参数</h4>
                    <p>
                        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                        <code>data-</code> 之后，例如
                        <code>data-url=""</code> 。
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 100px;">名称</th>
                                    <th style="width: 100px;">类型</th>
                                    <th style="width: 50px;">默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>url</td>
                                    <td>string</td>
                                    <td>空</td>
                                    <td>菜单数据加载地址</td>
                                </tr>
                                <tr>
                                    <td>isAlwaysShown</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>
                                        是否默认显示二级菜单
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h4 class="subitem-header" id="vmmenu-event">事件</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">事件</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>clickMenu.mu.vmMenu</code></td>
                                    <td>当点击菜单功能时，此事件将被立即触发。事件参数里面包含选中菜单及对应的地址。
                                    </td>
                                </tr>
                                <tr>
                                    <td><code>complete.mu.vmMenu</code></td>
                                    <td>菜单加载数据源完毕并渲染HTML成功后，此事件将被立即触发。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>监听事件使用jQuery的on方法：</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myMenu').on('complete.mu.vmMenu', function () {
// do something…
})
                         </pre>
                    </div>
                </div>
                <div class="bs-docs-section">
                    <h2 id="nbmenu" class="page-header">分组式下拉菜单<small>navbar.menu.mower.js</small>&nbsp;<small></h2>
                    <h3 class="item-header" id="nbmenu-examples">实例</h3>
                    <div class="bs-example">
                        <!-- BEGIN MAIN MENU -->
                        <div class="navbar navbar-default-red yamm" role="navigation">
                            <div class="navbar-header">
                                <!--<a href="#" class="navbar-brand">Search</a>-->
                                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <div class="navbar-collapse collapse" id="navbar-main">
                                <ul class="nav navbar-nav" data-url="assets/ajax/data/admin_menu.txt" rel="nbMenu">
                                    <li class="active">
                                        <a href="#" data-toggle="menu" data-hover="dropdown" data-level="two" data-code="ADMIN-MENU-13">个人业务<i class="fa fa-angle-down"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" data-toggle="menu" data-hover="dropdown" data-code="ADMIN-MENU-4">店铺管理<i class="fa fa-angle-down"></i></a>
                                    </li>
                                    <li> <a href="#">|</a>
                                    </li>
                                    <li>
                                        <a href="http://www.infinitus.com.cn/" target="_blank">资讯中心</a>
                                    </li>
                                </ul>
                                <ul class="nav navbar-nav navbar-right">
                                    <li>
                                        <a href="http://iu.infinitus.com.cn/index.html" target="_blank"><i class="fa fa-hand-o-right"></i>业务指南</a>
                                    </li>
                                    <li>
                                        <a href="http://iu.infinitus.com.cn/index.html" target="_blank"><i class="fa fa-hand-o-right"></i>处分通告</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- END MAIN MENU -->
                    </div>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;div class="navbar navbar-default-red yamm" role="navigation"&gt;
    &lt;div class="navbar-header"&gt;
        &lt;!--&lt;a href="#" class="navbar-brand"&gt;Search&lt;/a&gt;--&gt;
        &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="navbar-collapse collapse" id="navbar-main"&gt;
        &lt;ul class="nav navbar-nav" data-url="assets/ajax/data/menu.txt" rel="nbMenu"&gt;
            &lt;li class="active"&gt;
                &lt;a href="#" data-toggle="menu" data-hover="dropdown" data-level="two" data-code="ADMIN-MENU-13"&gt;个人业务&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#" data-toggle="menu" data-hover="dropdown" data-code="ADMIN-MENU-4"&gt;店铺管理&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;|&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="http://www.infinitus.com.cn/" target="_blank"&gt;资讯中心&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;
                &lt;a href="http://iu.infinitus.com.cn/index.html" target="_blank"&gt;&lt;i class="fa fa-hand-o-right"&gt;&lt;/i&gt;业务指南&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="http://iu.infinitus.com.cn/index.html" target="_blank"&gt;&lt;i class="fa fa-hand-o-right"&gt;&lt;/i&gt;处分通告&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
                              </pre>
                    </div>
                    <h3 class="item-header" id="nbmenu-usage">如何使用</h3>
                    <h4 class="subitem-header" id="nbmenu-usage-rel">通过 <code>rel="nbMenu"</code>
                              激活菜单</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
&lt;div class="navbar navbar-default-red yamm" role="navigation"&gt;
    &lt;div class="navbar-header"&gt;
        &lt;!--&lt;a href="#" class="navbar-brand"&gt;Search&lt;/a&gt;--&gt;
        &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="navbar-collapse collapse" id="navbar-main"&gt;
        &lt;ul class="nav navbar-nav" data-url="http://localhost:9000/assets/ajax/data/menu.txt" rel="nbMenu"&gt;
            &lt;li class="active"&gt;
                &lt;a href="#" data-toggle="menu" data-hover="dropdown" data-level="two" data-code="ADMIN-MENU-13"&gt;个人业务&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#" data-toggle="menu" data-hover="dropdown" data-code="ADMIN-MENU-4"&gt;店铺管理&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
                                </pre>
                    </div>
                    <h4 class="subitem-header" id="nbmenu-usage-js">通过JavaScript激活菜单</h4>
                    <div class="highlight">
                        <pre class="prettyprint">
                $(<span class="string">'#selector'</span>).nbMenu(options)
                                </pre>
                    </div>
                    <h4 class="subitem-header" id="nbmenu-options">参数</h4>
                    <p>
                        可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到
                        <code>data-</code> 之后，例如
                        <code>data-url=""</code> 。
                    </p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 100px;">名称</th>
                                    <th style="width: 100px;">类型</th>
                                    <th style="width: 50px;">默认值</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>url</td>
                                    <td>string</td>
                                    <td>空</td>
                                    <td>菜单数据加载地址</td>
                                </tr>
                                <tr>
                                    <td>菜单的子菜单展示方式</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><code>data-level</code></td>
                                    <td>string</td>
                                    <td></td>
                                    <td>
                                        在菜单项上面添加属性<code>data-level="two"</code>,将会以二级菜单形式展示子菜单列表，若没有设置该属性， 将以分组形式展示。
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h4 class="subitem-header" id="nbmenu-event">事件</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">事件</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>clickMenu.mu.nbMenu</code></td>
                                    <td>当点击菜单功能时，此事件将被立即触发。事件参数里面包含选中菜单及对应的地址。
                                    </td>
                                </tr>
                                <tr>
                                    <td><code>complete.mu.nbMenu</code></td>
                                    <td>菜单加载数据源完毕并渲染HTML成功后，此事件将被立即触发。</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>监听事件使用jQuery的on方法：</p>
                    <div class="highlight">
                        <pre class="prettyprint">
$('#myMenu').on('complete.mu.nbMenu', function () {
// do something…
})
                        </pre>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
                    <ul class="nav bs-docs-sidenav">
                        <li>
                            <a href="#datatables">数据表格</a>
                            <ul class="nav">
                                <li><a href="#datatables-examples">实例</a></li>
                                <li><a href="#datatables-examples-html">简单应用</a></li>
                                <li><a href="#datatables-examples-sort">启用排序功能</a></li>
                                <li><a href="#datatables-examples-paging">启用分页功能</a></li>
                                <li><a href="#datatables-examples-selected">高亮选中行</a></li>
                                <li><a href="#datatables-examples-all">综合示例</a></li>
                                <li><a href="#datatables-usage">如何使用</a></li>
                                <li><a href="#datatables-usage-rel">使用rel属性</a></li>
                                <li><a href="#datatables-usage-js">javascript调用</a></li>
                                <li><a href="#datatables-options">参数</a></li>
                                <li><a href="#datatables-function">方法</a></li>
                                <li><a href="#datatables-event">事件</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#bootpage">自定义数据表格</a>
                            <ul class="nav">
                                <li><a href="#bootpage-examples">实例</a></li>
                                <li><a href="#bootpage-usage">如何使用</a></li>
                                <li><a href="#bootpage-usage-js">javascript调用</a></li>
                                <li><a href="#bootpage-options">参数</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#vmmenu">类电商式下拉菜单</a>
                            <ul class="nav">
                                <li><a href="#vmmenu-examples">实例</a></li>
                                <li><a href="#vmmenu-usage">如何使用</a></li>
                                <li><a href="#vmmenu-usage-rel">使用rel属性</a></li>
                                <li><a href="#vmmenu-usage-js">javascript调用</a></li>
                                <li><a href="#vmmenu-options">参数</a></li>
                                <li><a href="#vmmenu-event">事件</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#nbmenu">分组式下拉菜单</a>
                            <ul class="nav">
                                <li><a href="#nbmenu-examples">实例</a></li>
                                <li><a href="#nbmenu-usage">如何使用</a></li>
                                <li><a href="#nbmenu-usage-rel">使用rel属性</a></li>
                                <li><a href="#nbmenu-usage-js">javascript调用</a></li>
                                <li><a href="#nbmenu-options">参数</a></li>
                                <li><a href="#nbmenu-event">事件</a></li>
                            </ul>
                        </li>
                        <a class="back-to-top" href="#top">
                          返回顶部
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="libs/jquery/jquery-1.11.1.min.js"></script>
    <script src="libs/jquery-tmpl/jquery.tmpl.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/plugins/google-code-prettify/prettify.js"></script>
    <script src="assets/js/docs.min.js"></script>
    <script src="mower/admin/js/mower.js"></script>
    <script id="myTemplate" type="text/x-jquery-tmpl">
           <tr><td>${ID}</td><td>${Name}</td></tr>
    </script>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 2
        }).on("page", function(event, /* page number here */ num){
            // some ajax content loading...
            var that = this;
            var markup = '<tr><td>${name}</td><td>${position}</td><td>${office}</td><td>${salary}</td></tr>';

              // Compile the markup as a named template
              $.template( "rowTemplate", markup);
              $.ajax({
                dataType: "json",
                url: '../../assets/ajax/data/objects_tmpl.txt',
              })
              .done(function(result){
                // Render the template with the "employee" data and insert
                // the rendered HTML under the 'bootpag-example tbody' element
                $('#bootpag-example tbody').empty();
                $.tmpl( "rowTemplate", result.data )
                       .appendTo("#bootpag-example tbody");
                // ... after content load -> change total to 10
                $(that).bootpag({total: result.data.length/3, maxVisible: 10});
              });
        });
    </script>
</body>

</html>
